<template>
  <div class="box">
    <div class="tree w300">
      <div class="treeAdd">
        <el-button icon="el-icon-plus" type="primary" @click="openType()">新增分类</el-button>
      </div>
      <el-tree :data="treeData" :props="{label:'study_type_name',value:'id',children:'studying_types'}" highlight-current v-loading="treeLoading" node-key="id" default-expand-all @node-click="selType" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button icon="el-icon-edit" type="primary" @click="openType(data.id)" circle size="mini"></el-button>
            <el-button icon="el-icon-delete" type="danger" @click="delType(data.id)" circle size="mini"></el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="boxR">
      <el-form :inline="true" :model="queryForm" @keyup.enter.native="getDataList('reset')">
        <el-form-item label="课程名称">
          <el-input v-model="queryForm.study_name" maxlength="20" placeholder="课程名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.has_status" placeholder="请选择" clearable>
            <el-option label="上架" :value="1"></el-option>
            <el-option label="下架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDataList('reset')">查询</el-button>
          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
          <el-button icon="el-icon-plus" type="primary" @click="openDetails()">新增课程</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="dataList" border v-loading="dataListLoading">
        <el-table-column align="center" label="序号" width="60">
          <template slot-scope="scope">
            <span>{{(queryForm.page - 1) * queryForm.limit + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="study_name" header-align="center" align="center" label="课程名称">
        </el-table-column>
        <el-table-column prop="receive_time" header-align="center" align="center" label="缩略图">
          <template slot-scope="{row}">
            <el-popover placement="left" title trigger="hover">
              <img :src="row.study_url" style="height: 200px;margin-right: 10px;">
              <img slot="reference" :src="row.study_url" @click="$openImg(row.study_url)" style="height: 50px;width: 50px;margin-right: 10px;">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="studying_count" header-align="center" align="center" label="课程章节">
        </el-table-column>
        <el-table-column prop="studying_length" header-align="center" align="center" label="课程时长(分钟)"></el-table-column>
        <el-table-column prop="study_type_name" header-align="center" align="center" label="课程分类">
        </el-table-column>
        <el-table-column prop="has_order" header-align="center" align="center" label="会员专享">
          <template slot-scope="{row}">
            {{row.has_vip?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column prop="has_order" header-align="center" align="center" label="排序">
        </el-table-column>
        <el-table-column prop="create_time" width="180px" header-align="center" align="center" label="创建时间">
        </el-table-column>
        <el-table-column prop="use_status" header-align="center" align="center" label="状态">
          <template slot-scope="{row}">
            <el-tag v-if="row.has_status">上架</el-tag>
            <el-tag v-else type="success">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="goSectionList(row)">章节管理</el-button>
            <el-button type="text" size="small" @click="openDetails(row)">修改</el-button>
            <el-button type="text" size="small" v-if="!row.has_header" @click="changeSatus(row,'hasHeader','has_header')">推荐课程</el-button>
            <el-button type="text" size="small" v-else @click="changeSatus(row,'hasHeader','has_header')">取消推荐课程</el-button>
            <el-button type="text" size="small" v-if="!row.has_status" @click="changeSatus(row,'hasStatus','has_status')">上架</el-button>
            <el-button type="text" size="small" v-else @click="changeSatus(row,'hasStatus','has_status')">下架</el-button>
            <el-button type="text" size="small" @click="delItem(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="queryForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryForm.limit" :total="total" layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!-- 新增、修改 分类 -->
    <el-dialog :title="typeForm.id?'编辑分类':'新增分类'" :visible.sync="typeShow" width="30%" center @close="handleClose">
      <el-form ref="typeForm" :model="typeForm" v-loading="typeLoaidng" :rules="rules" label-width="100px">
        <el-form-item label="分类名称：" prop="study_type_name">
          <el-input v-model="typeForm.study_type_name" maxlength="20" placeholder="课程名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="上级分类：" prop="parent_idArr">
          <el-cascader :disabled="Boolean(typeForm.id)" :options="treeData" v-model="typeForm.parent_idArr" :props="{ label:'study_type_name',value:'id',children:'studying_types',checkStrictly: true }" clearable @change="treeFormchange"></el-cascader>
        </el-form-item>
        <el-form-item label="序号：" prop="has_order">
          <el-input-number v-model="typeForm.has_order" :precision="0" :min="1" label="序号"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="typeShow = false">取 消</el-button>
        <el-button type="primary" @click="submitType" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增、修改  课程 -->
    <Details :show.sync="detailsShow" :id="activeItem.id" :parentId="queryForm.study_type" :tree="treeData" @change="getDataList()"></Details>
  </div>
</template>

<script>
import videoStudyApi from '@/api/videoStudyApi.js'
import Details from './details.vue'
export default {
  components: {
    Details
  },
  data () {
    return {
      treeData: [],
      queryForm: {
        page: 1,
        limit: 10
      },
      rules: {
        study_type_name: [
          { required: true, message: '请输入分类名称', trigger: 'change' },
        ],
        // parent_idArr: [
        //   { required: true, message: '请选择上级分类', trigger: 'change' },
        // ],
        has_order: [
          { required: true, message: '请输入序号', trigger: 'change' },
        ]
      },
      dataList: [],
      dataListLoading: false,
      treeLoading: false,
      typeLoaidng: false,
      total: 0,
      typeForm: {},
      typeShow: false,//分类新增编辑弹窗 开关
      btnLoading: false,//提交按钮Loading
      detailsShow: false,//新增、修改弹窗开关
      activeItem: {}
    }
  },
  created () {
    this.getTree();
    this.getDataList();
  },
  methods: {
    getDataList (reset) {
      if (reset) this.queryForm.page = 1;
      this.dataListLoading = true;
      for (let v in this.queryForm) {
        if (this.queryForm[v] === '' || this.queryForm[v] === null) {
          delete this.queryForm[v]
        }
      }
      videoStudyApi.studyingList(this.queryForm).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list;
          this.total = res.data.page.totalCount;
        }
        this.dataListLoading = false;
      })
    },
    reset () {
      this.queryForm = {
        page: 1,
        limit: 10
      }
      this.getDataList()
    },
    // 跳转章节列表
    goSectionList (item) {
      this.$router.push({
        path: "/videoStudy-sectionList",
        query: {
          id: item.id,
          title: item.study_name
        }
      })
    },
    // 点击分类
    selType (e) {
      this.queryForm.study_type = e.id;
      this.queryForm.page = 1;
      this.getDataList()
    },
    // 开启弹窗
    openDetails (item) {
      this.activeItem = item || {};
      this.detailsShow = true;
    },
    // 获取分类tree
    getTree () {
      this.treeLoading = true;
      videoStudyApi.getAllStudy().then(res => {
        if (res && res.data.code == 200) {
          this.treeData = res.data.data;
        }
        this.treeLoading = false;
      })
    },
    treeFormchange (e) {
      if (e && e.length > 0) {
        this.typeForm.parent_id = e[e.length - 1]
      } else {
        this.typeForm.parent_id = null
      }
    },
    // 分类弹窗  开启
    openType (id) {
      this.typeShow = true;
      if (id) {
        this.getTypeDetails(id)
      }
    },
    // 分类弹窗  关闭
    handleClose () {
      this.typeForm = {};
      this.$refs.typeForm.resetFields();
      this.typeShow = false;
    },
    // 获取分类详情
    getTypeDetails (id) {
      this.typeLoaidng = true;
      videoStudyApi.studyingtypeInfo(id).then(res => {
        if (res && res.data.code == 200) {
          this.typeForm = res.data.data;
          this.typeForm.parent_idArr = this.typeForm.parent_id ? [this.typeForm.parent_id] : []
        }
        this.typeLoaidng = false;
      })
    },
    // 分类提交
    submitType () {
      this.$refs.typeForm.validate((valid) => {
        if (valid) {
          if (this.typeForm.id) {
            this.updateType()
          } else {
            this.addType()
          }
        }
      })
    },
    // 删除分类
    delType (id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoStudyApi.studyingtypeDel(id).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('删除成功！')
            this.getTree();
          }
        })
      }).catch(() => { })
    },
    // 新增分类
    addType () {
      this.btnLoading = true;
      videoStudyApi.studyingtypeAdd(this.typeForm).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('新增成功！');
          this.getTree();
          this.handleClose()
        }
        this.btnLoading = false;
      })
    },
    // 编辑分类
    updateType () {
      this.btnLoading = true;
      videoStudyApi.studyingtypeUpdate(this.typeForm).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('修改成功！');
          this.getTree();
          this.handleClose()
        }
        this.btnLoading = false;
      })
    },
    // 上下架 推荐
    changeSatus (item, str, name) {
      let type = item[name];
      let data = {
        id: item.id,
        type: str
      }
      videoStudyApi.headerORstatus(data).then(res => {
        if (res && res.data.code == 200) {
          if (type && str == 'hasStatus') {
            this.$message.success('下架成功！')
          } else if (!type && str == 'hasStatus') {
            this.$message.success('上架成功！')
          } else if (type && str == 'hasHeader') {
            this.$message.success('取消推荐成功！')
          } else if (!type && str == 'hasHeader') {
            this.$message.success('推荐成功！')
          }
          this.getDataList()
        }
      })
    },
    // 删除课程
    delItem (id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoStudyApi.studyingDel(id).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('删除成功！')
            this.getDataList()
          }
        })
      }).catch(() => { })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryForm.limit = val
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryForm.page = val
      this.getDataList()
    },
  }
}
</script>

<style lang="scss" scoped>
.w300 {
  width: 300px;
  flex-shrink: 0;
}
.box {
  display: flex;
}
.tree {
  border-right: 1px solid #dcdfe6;
  min-height: 500px;
  .treeAdd {
    text-align: center;
    margin-bottom: 20px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-button.is-circle {
    padding: 5px !important;
  }
  .el-button + .el-button {
    margin-left: 0px;
  }
}
.boxR {
  padding-left: 10px;
  flex: 1;
  flex-shrink: 1;
}
.tree {
  overflow: auto;
}
</style>